<template>
  <div class="JobDetails">
    <myHead title="岗位详情"></myHead>
    <div class="job-top">
      <div class="job-name">
        <p>{{job.name}}</p><p>{{job.salary}}元/天</p>
      </div>
      <div class="job-fl">
        <p><img src="../../../static/img/job1.png" alt=""><span>{{job.place}}</span></p>
        <p><img src="../../../static/img/job2.png" alt=""><span>1-3年</span></p>
        <p><img src="../../../static/img/job3.png" alt=""><span>全职</span></p>
      </div>
      <div class="job-type">
        <p>朝九晚六</p><p>含午餐</p>
      </div>
    </div>
    <div class="shop">
      <div class="shop-l">
        <img src="../../../static/img/job001.png" alt="">
      </div>
      <div class="shop-r">
        <div class="shop-r-t">
          <p>{{job.company}}</p>
          <p v-if="job.status == 1">已认证</p>
        </div>
<!--        <p>民营&emsp;|&emsp;超市</p>-->
      </div>
    </div>
    <div class="info">
      <div class="info-list">
        <div class="info-list-box" v-for="(x,y) in infoList" @click="isShow(y)">
          <p class="info-list-box-tit"><img :src="isShowInfoList==y?x.url+'ed.png':x.url+'.png'" alt=""><span :class="isShowInfoList==y?'seled':''">{{x.text}}</span></p>
          <transition name="el-zoom-in-center">
            <p v-show="isShowInfoList==y" class="showG"></p>
          </transition>
        </div>
      </div>
      <div class="info-msg" v-show="isShowInfoList==0" :style="{minHeight:$store.state.minHeight-3.54+'rem'}">
        <div class="info-msg-tit">【职位要求】</div>
        <div class="info-msg-type">{{job.request}}</div>
        <div class="info-msg-tit">【职位内容】</div>
        <div class="info-msg-msg">
          <p>{{job.describe}}</p>
        </div>
      </div>
      <div class="info-msg" v-show="isShowInfoList==1" :style="{minHeight:$store.state.minHeight-3.54+'rem'}">
        <div class="info-msg-tit">【公司简介】</div>
        <div class="info-msg-msg">
          <p>{{job.desc}}</p>
        </div>
      </div>
    </div>
    <div class="btnWrap">
      <div class="showC" @click="collection"><img :src="showC?'../../../static/img/shoucanged.png':'../../../static/img/shoucang.png'" alt=""><span>职位收藏</span></div>
      <div :class="isDelivery?'btn btned':'btn'" @click="delivery">{{isDelivery?'已投递':'投递简历'}}</div>
    </div>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";

  export default {
    name: "JobDetails",
    components:{
      myHead
    },
    data(){
      return {
        infoList:[{text:'职位描述',url:'../../../static/img/info222'},{text:'公司信息',url:'../../../static/img/info111'}],
        isShowInfoList:0,
        job:false,
        id:1,
        msgList:['承担核心功能代码编写，重点项目开发，确保技术方案能够按计划要求，高质量的完 成','深入理解业务需求，分析和发现系统的优化点，负责推动产品性能和系统优化','解决各类技术难题，系统优化，架构升级，完成政务平台能力沉淀和组件框架沉淀',
        '技术能力扎实，理解IO、多线程、集合、分布式等基础框架，熟悉Servlet、 Spring、MyBatis、Velocity开发，熟悉Linux操作系统和常用数据库，对于用过的 开源框架，能了解到它的原理和机制，有一定线上故障排查经验','具有良好的业务敏感度和优秀的业务分析技能。能够开发创新而实际的分析方法以解 决复杂的商业问题'],
        isDelivery:false,
        showC:false, // 是否收藏
      }
    },
    created() {
      this.id = this.$route.query.id;
      this.$myAxios('index/Classify/moonlighted_details','post',{
        details_id:this.id,
      }).then(res=>{
        console.log(res.data.headline_moonlighted);
        if (res.data.state == '1') {
          this.job = res.data.headline_moonlighted
        } else {
          this.error = true;
        }
      });
      this.$myAxios('index/Deliver/index','post',{
        user_id:this.$myStorage.query(),
        moonlighted_id:this.id,
      }).then(res=>{
        if (res.data.state == '1') {
          this.isDelivery = true;
        } else {
          this.error = true;
        }
      })
    },
    methods:{
      isShow(index){
        this.isShowInfoList = index;
      },
      delivery(){
        if(this.isDelivery){
          this.$myNotice("请勿重复投递",2000)
        }else{
          this.$myAxios('index/Deliver/deliver','post',{
            user_id:this.$myStorage.query(),
            moonlighted_id:this.id,
          }).then(res=>{
            if (res.data.state == '1') {
              this.isDelivery = true;
            } else {
              this.error = true;
            }
          })
        }

      },
      collection(){
        this.$myAxios('index/Deliver/post_collection','post',{
          user_id:this.$myStorage.query(),
          moonlighted_id:this.id,
        }).then(res=>{
          if (res.data.state == '1') {
            this.showC = !this.showC;
          } else {
            this.error = true;
          }
        })
      }
    }
  }
</script>

<style scoped>
  .JobDetails {
    width: 100%;
    min-height: 6.67rem;
    box-sizing: border-box;
    padding-top: .5rem;
    background-color: #F5F5F5;
  }

  .job-top {
    padding: .15rem;
    background-color: #FFFFFF;
    margin-bottom: .1rem;
  }
  .job-name {
    height: .2rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .15rem;
  }
  .job-name>p:nth-child(1) {
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #111010;
  }
  .job-name>p:nth-child(2) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FD4334;
  }
  .job-fl {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: .15rem;
  }
  .job-fl>p {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-right: .15rem;
  }
  .job-fl>p>img {
    width: .12rem;
    max-height: .12rem;
    margin-right: .05rem;
  }
  .job-fl>p>span {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #626563;
  }
  .job-type {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }
  .job-type>p {
    padding: 0 .1rem;
    height:.2rem;
    background:rgba(255,126,46,.15);
    border-radius:.03rem;
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
    text-align: center;
    line-height: .2rem;
    margin-right: .1rem;
  }

  .shop {
    padding: .1rem .15rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-start;
    background-color: #FFFFFF;
    margin-bottom: .1rem;
  }
  .shop-r {
    width: calc(100% - .65rem);
    height: .5rem;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
  }
  .shop-r>p:nth-child(2) {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #878A88;
  }
  .shop-r-t {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .shop-r-t>p:nth-child(1) {
    max-width: 2.4rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .shop-r-t>p:nth-child(2) {
    width:.44rem;
    height:.16rem;
    background:rgba(255,126,46,1);
    border-radius:.08rem;
    font-size:.1rem;
    font-family:Source Han Sans CN;
    font-weight:400;
    color: #FFFFFF;
    text-align: center;
    line-height: .16rem;
    margin-left: .3rem;
  }
  .shop-l {
    width: .5rem;
    height: .5rem;
    margin-right: .1rem;
  }
  .shop-l>img {
    width: 100%;
    max-height: .5rem;
    border-radius: 50%;
  }

  .info {
    padding: 0 .15rem;
    background-color: #FFFFFF;
  }
  .info-list {
    width: 100%;
    height: .45rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
    border-bottom: .01rem solid #F1F1F1;
  }
  .info-list-box {
    height: .45rem;
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }
  .info-list-box-tit {
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .info-list-box-tit>img {
    width: .12rem;
    height: .13rem;
    margin-right: .05rem;
  }
  .info-list-box-tit>span {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #141515;
  }
  .seled {
    color: #FF7E2E !important;
  }
  .showG {
    height: .02rem;
    width: 95%;
    position: absolute;
    bottom: .01rem;
    background-color: #FF7E2E;
  }

  .info-msg {
    overflow-x: hidden;
    box-sizing: border-box;
    padding-bottom: .1rem;
  }
  .info-msg-tit {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #262727;
    height: .5rem;
    line-height: .5rem;
  }
  .info-msg-type {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }
  .info-msg-type>p {
    padding: 0 .1rem;
    height:.2rem;
    background:rgba(255,126,46,1);
    border-radius:.03rem;
    font-size:.11rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FFFFFF;
    text-align: center;
    line-height: .2rem;
    margin-right: .1rem;
  }

  .info-msg-type,.info-msg-msg {
    padding-left: .05rem;
  }
  .info-msg-msg>p {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    line-height: .23rem;
    color: #989A99;
  }
  .btnWrap {
    width: 100%;
    height: .5rem;
    box-sizing: border-box;
    background-color: #FFFFFF;
    display: flex;
    flex-flow: row;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    justify-content: space-between;
    padding: 0 .1rem;
  }
  .btn {
    width:2.1rem;
    height:.38rem;
    background:rgba(255,126,46,1);
    border-radius:.05rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FFFFFF;
    text-align: center;
    line-height: .38rem;
  }
  .btned {
    background-color: #d5d5d5;
    color: #FFFFFF;
  }
  .showC {
    width:1.29rem;
    height:.38rem;
    border:.01rem solid rgba(255,126,46,1);
    border-radius:.05rem;
    font-size: 0;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }
  .showC>span {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FF7E2E;
  }
  .showC>img {
    width: .15rem;
    height: .15rem;
    margin-right: .05rem;
  }
</style>
